Spending hours manually shrinking product photos in Photoshop or watching WordPress plugins choke server memory during batch uploads is exhausting. Worse, manual image workflows break easily. It takes just one teammate uploading an uncompressed 6MB camera file to cripple your page load speeds across your entire site.
Oversized images remain the single biggest cause of poor Google PageSpeed Insights scores. When mobile devices download multi-megabyte JPEGs over cellular connections, your Largest Contentful Paint (LCP) metrics plummet. Search engines penalize sluggish pages in mobile rankings, driving up bounce rates. Every unoptimized megabyte also directly increases your CDN egress bills and hosting bandwidth consumption.
Edge-based image optimization fixes this permanently. Instead of converting files before uploading, you keep your original high-resolution assets intact on your origin server or storage bucket. An edge service intercepts requests on the fly, transforming images into the lightest modern format a visitor’s browser can handle—without any manual work.
How Bunny Optimizer Compresses Images
Bunny Optimizer operates inside Bunny.net’s edge network, processing images milliseconds before delivering them to users. The system relies on real-time browser negotiation and dynamic transformations.
Intelligent Format Negotiation via HTTP Headers
When a browser requests an image, it sends an Accept header specifying supported file formats (such as image/webp or image/avif). Bunny Optimizer checks this header instantly:
- If the browser supports modern formats, Bunny serves a lightweight WebP or AVIF version.
- If an older browser cannot parse modern formats, Bunny serves standard JPEG or PNG files instead.
This conversion requires no changes to your frontend markup. Your HTML can point to /images/hero-banner.jpg, and Bunny dynamically delivers a WebP payload with a content-type: image/webp header.
Edge-Level Lossy and Lossless Compression
Bunny applies perceptual compression algorithms directly at the CDN point of presence (PoP). By analyzing image detail, the optimizer strips redundant color data, metadata, and invisible color profiles without introducing visual artifacts. You can choose between standard lossless compression (reducing file sizes without altering pixels) and lossy compression (drastically cutting payload sizes while preserving sharp visuals).
Dynamic URL Manipulation
Beyond automatic format conversion, Bunny Optimizer enables real-time transformations through simple URL parameters. Instead of manually rendering dozens of thumbnail sizes on your server, you append query strings directly to image URLs:
- Resize on demand: image.jpg?width=600
- Set custom quality: image.jpg?quality=80
- Crop to aspect ratios: image.jpg?width=400&height=400&crop=center
- Apply color filters or blur: image.jpg?blur=10
The edge node processes the transformation on the first request, caches the result globally, and serves it instantly to all future visitors.
Step-by-Step Guide for Bunny Optimizer
Enabling Bunny Optimizer takes less than five minutes and requires no modifications to your origin files.
Step 1: Enable the Add-on in Your Pull Zone
- Log in to your Bunny.net Dashboard.
- Select Pull Zones from the navigation menu and choose your target domain.
- Click the Bunny Optimizer tab in the zone settings.
- Toggle the switch to activate Bunny Optimizer for that zone.
Step 2: Configure Optimal Baseline Settings
Once activated, Bunny provides key options to customize edge processing. For the ideal balance of speed and visual quality, apply these baseline settings:
- Image Optimization: Enable this toggle to turn on dynamic compression and URL manipulation.
- WebP Image Conversion: Turn this ON to automatically transcode PNGs and JPEGs into WebP format for supported browsers.
- Default Image Quality: Set the slider between 80% and 85%. This sweet spot dramatically cuts file size with no noticeable loss in sharpness.
- Watermarking & Manipulation: Keep this enabled if you plan to dynamically resize or brand images using URL parameters.
Step 3: Verify the Implementation in Browser DevTools
Confirm that Bunny Optimizer is serving transformed images using your browser’s developer tools:
- Open your website in Google Chrome or Mozilla Firefox.
- Right-click anywhere, select Inspect, and open the Network tab.
- Filter requests by Img and refresh the page.
- Select any image asset and inspect its Response Headers.
What to look for:
content-type: image/webp (even if the URL ends in .jpg or .png)
server: BunnyCDN
cdn-cache: HIT (confirms the optimized image is served directly from the edge cache)
Bandwidth Savings and Speed Metrics
Replacing static, legacy images with dynamic edge WebP delivery yields instant improvements in bandwidth usage and Core Web Vitals.
File Size Reductions
Uncompressed PNG graphics—such as logos, transparent illustrations, and screenshots—see the highest savings, shrinking by 70% to 85% when converted to WebP. Photographic JPEGs typically drop by 50% to 65% at an 80% quality threshold. A page featuring twenty 500KB images can drop from a heavy 10MB payload to under 2.5MB.
Impact on Core Web Vitals
Lighter image payloads directly accelerate core performance metrics:
- Largest Contentful Paint (LCP): Because hero images download much faster, browsers render primary viewport content far earlier.
- First Contentful Paint (FCP): Streamlined network transfers prevent bandwidth saturation, allowing CSS and layout files to load faster.
- Cumulative Layout Shift (CLS): Using Bunny’s URL parameters to specify explicit width and height values prevents unexpected layout shifts as responsive images load.
Cost vs. Bandwidth Savings
Although Bunny Optimizer is a paid add-on, it regularly pays for itself on high-traffic sites. Because Bunny charges for bandwidth per gigabyte, cutting your image transfer volume in half significantly reduces overall egress costs, offsetting the monthly fee while speeding up your site.
How to Fine-Tune Your Setup
Flushing the Cache After Activation
If you inspect an image after enabling Bunny Optimizer and see an unoptimized JPEG, your edge nodes may still hold legacy files in cache. To resolve this, open your Pull Zone dashboard and click Purge Cache. Once cleared, edge nodes re-fetch origin files and execute the optimization rules.
Protecting Your Origin Assets
Edge compression never alters or replaces files stored on your origin server, AWS S3 bucket, or Bunny Storage container. All transformations occur in memory at the CDN layer. If you ever disable the optimizer, your original, full-resolution files remain untouched.
Adjusting Quality Thresholds for Sensitive Visuals
An 80% quality setting works perfectly for blogs and marketing pages, but image-heavy sites like photography portfolios or jewelry stores may occasionally show subtle color banding on smooth gradients. To prevent this:
- Increase the global quality baseline in your dashboard to 90%.
- Override quality on critical assets via URL parameters: hero-art.jpg?quality=92.
- Keep thumbnail assets at lower quality tiers to preserve maximum performance across list pages.